<template>
    <div>
        <!--    
            2.事件修饰符
                .stop  阻止事件冒泡
                .prevent  阻止事件默认行为，常见有默认行为的标签有 a  在from中的button
                    .stop可以和.prevent结合使用，无顺序之分同时生效！
                
                .once 让事件只触发一次
        -->
        <div class="big" @click="bigClick">
            <div class="small" @click.stop="smallClick">
                <a href="#" @click.stop.prevent="aClick">a标签</a>
            </div>
        </div>
        <button @click.once="btnClick">点我</button>

        <!-- 按键修饰符 -->
        <!-- 按下回车触发事件 这个会比较常用在表单提交。 如当用户输入完账号密码进行登录操作就可以用这个！ -->
        <input type="text" @keyup.enter="hdClick">
    </div>
</template>

<script>
export default {
    data () {
        return {

 
        }
    },
    methods:{
        bigClick(){
            console.log('大盒子')
        },
        smallClick(){
            console.log('小盒子')
        },
        aClick(){
            console.log('a标签')
        },
        btnClick(){
            console.log('就一次！！！')
        },
        hdClick(){
            console.log(1111)
        }
    }
}
</script>
 
<style lang="less" scoped>
    .big{
        width: 300px;
        height: 300px;
        background-color: skyblue;
        .small{
            width: 200px;
            height: 200px;
            background-color: tan;
        }
    }
</style>